<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册页面</title>
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css">
    <script src="../../static/js/axios-0.18.0.js"></script>
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/plugins/echarts/echarts.js"></script>
    <!--引入样式-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--<script src="../../static/plugins/elementui/index.js"></script>
    <link rel="stylesheet" href="../../static/plugins/elementui/index.css">-->
    <link rel="stylesheet" href="../../static/css/style.css" type="text/css">

    <style type="text/css" abt="234"></style>
</head>
<body>
<div id="app">
    <el-container>
        <el-main>
            <div class="content">
                <el-form ref="loginform" :model="loginform" :rules="rules" label-position="right" label-width="100px">
                    <el-row>
                        <div class="title" style="padding-top: 20px">
                            <p>用户登录</p>
                        </div>
                    </el-row>
                    <el-row>
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="loginform.username"/>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="密码" prop="password">
                            <el-input type="password" v-model="loginform.password"/>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="验证码" prop="code">
                                <el-input v-model="loginform.code"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <img src="/user/images" title="看不清，请点击图片刷新" width="128px"
                                 height="33px" id="image1" @click="getcode(this)"/>
                        </el-col>
                    </el-row>
                    <el-row style="padding-left: 60px">
                        <el-col :span="12">
                            <el-button type="primary" plain @click="loginIn()"
                                       v-loading.fullscreen.lock="fullscreenLoading">登陆
                            </el-button>
                        </el-col>
                        <el-col :span="12">
                            <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">注册</el-button>
                        </el-col>
                    </el-row>
                </el-form>

            </div>

            <!--注册抽屉-->
            <el-drawer
                    title="注册"
                    :visible.sync="drawer"
                    :with-header="false">
                <div style="padding-top: 20px;padding-left: 20px;padding-right: 20px">
                    <el-form ref="regisform" :model="regisform" :rules="rules2" label-position="right"
                             label-width="100px">
                        <el-row>
                            <el-tag type="success"><span style="font-size: 20px;">注册</span></el-tag>
                        </el-row>
                        <el-row>
                            <el-form-item label="用户名" prop="username">
                                <el-input v-model="regisform.username"/>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="密码" prop="password">
                                <el-input type="password" v-model="regisform.password"/>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-col :span="18">
                                <el-form-item label="手机号" prop="mobilephone">
                                    <el-input v-model="regisform.mobilephone"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <!--发送验证码-->
                                <!--<el-button @click="sendCode()" size="small" type="info" plain>点击发送验证码</el-button>-->
                                <el-button  plain
                                           @click="sendCode(this)">点击发送验证码
                                </el-button>
                            </el-col>
                        </el-row>
                        <el-row>

                        </el-row>
                        <el-row>
                            <el-form-item label="验证码" prop="code">
                                <el-input v-model="regisform.code"/>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model="regisform.email"/>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="学校" prop="school">
                                <el-select v-model="regisform.school" placeholder="请选择">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>

                        <el-row>
                            <el-form-item label="性别" prop="sex">
                                <el-radio v-model="regisform.sex" label="男">男</el-radio>
                                <el-radio v-model="regisform.sex" label="女">女</el-radio>
                            </el-form-item>
                        </el-row>

                        <el-button type="success" @click="regisUser()">注册</el-button>
                    </el-form>
                </div>
            </el-drawer>
        </el-main>
    </el-container>


</div>


</body>
<script type="text/javascript" src="../../static/js/ribbon.js"></script>
<canvas id="bgCanvas" width="1432" height="937"
        style="display: block; position: fixed; margin: 0px; padding: 0px; border: 0px; outline: 0px; left: 0px; top: 0px; width: 100%; height: 100%; z-index: -1; background-color: rgba(223, 223, 223, 0.3);">
</canvas>
<!-- 引入组件库 -->
<script type="text/javascript" src="../../static/js/index.js"></script>
<!--<script type="text/javascript">
    var clock = '';
    var nums = 10;
    var btn;

    function sendCode2(thisBtn) {
        btn = thisBtn;
        btn.disabled = true; //将按钮置为不可点击
        btn.value = nums + '秒后可重新获取';
        clock = setInterval(doLoop, 1000); //一秒执行一次
    }

    function doLoop() {
        nums&#45;&#45;;
        if (nums > 0) {
            btn.value = nums + '秒后可重新获取';
        } else {
            clearInterval(clock); //清除js定时器
            btn.disabled = false;
            btn.value = '点击发送验证码';
            nums = 10; //重置时间
        }
    }
</script>-->
<script type="text/javascript">
    const app = new Vue({
        el: "#app",
        data: {
            nums: 30,
            btn: '',
            clock: '',
            loginform: {},
            regisform: {},
            rules: {
                username: [{required: true, message: '用户名为必填', trigger: 'blur'},
                    {min: 3, max: 16, message: "长度在3到16之间", trigger: 'blur'}],
                password: [{required: true, message: '密码为必填', trigger: 'blur'},
                    {min: 8, max: 16, message: "长度在8到16之间", trigger: 'blur'}],
                code: [{required: true, message: '验证码为必填项', trigger: 'blur'},
                    {min: 5, max: 5, message: "长度为5", trigger: 'blur'}]
            },
            rules2: {
                username: [{required: true, message: '用户名为必填', trigger: 'blur'},
                    {min: 3, max: 16, message: "长度在3到16之间", trigger: 'blur'}],
                password: [{required: true, message: '密码为必填', trigger: 'blur'},
                    {min: 8, max: 16, message: "长度在8到16之间", trigger: 'blur'}],
                mobilephone: [{pattern: /^(1[34578]\d{9})$/, required: true, message: "请填入正确的手机号", trigger: 'blur'}],
                code: [{pattern: /^\d{6}$/, required: true, message: '验证码为必填项', trigger: 'blur'}],
                email: [{
                    pattern: /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,
                    required: false,
                    message: "请填写正确的邮箱",
                    trigger: 'blur'
                }]
            },
            fullscreenLoading: false,
            drawer: false,
            options: [{
                value: '南阳理工学院',
                label: '南阳理工学院'
            }, {
                value: '南阳师范学院',
                label: '南阳师范学院'
            }, {
                value: '南阳医专',
                label: '南阳医专'
            }, {
                value: '南阳工程技术学院',
                label: '南阳工程技术学院'
            }
            ]
        },
        methods: {
            doLoop() {
                this.nums--;
                if (this.nums > 0) {
                    this.btn.value = this.nums + '秒后可重新获取';
                } else {
                    clearInterval(this.clock); //清除js定时器
                    this.btn.disabled = false;
                    this.btn.value = '点击发送验证码';
                    this, nums = 30; //重置时间
                }
            },
            //登陆
            loginIn() {
                //表单校验
                this.$refs['loginform'].validate((valid) => {
                    if (valid) {
                        axios.post("/user/login", this.loginform).then((res) => {
                            if (res.data.flag
                            ) {
                                //登陆成功，跳转页面
                                this.$message.success(res.data.message);
                                //跳转页面
                                this.fullscreenLoading = true;
                                setTimeout(() => {
                                    this.fullscreenLoading = false;
                                    location.href = "/";
                                }, 2000);
                            } else {//登陆失败，提示用户名或者密码错误或者验证码错误
                                this.$message.error(res.data.message);
                            }
                        }).catch(() => {
                            this.$message.error("请求出错");
                        })
                    } else {
                        this.$message.error("表单验证失败，请重新填写");
                    }
                })
            },
            //发送验证码
            sendCode(thisBtn) {
                //校验手机号
                var phone = this.regisform.mobilephone;
                var phonetest = /^(1[34578]\d{9})$/;
                var flag = phonetest.test(phone);
                this.btn = thisBtn;
                if (flag) {
                    this.btn.disabled = true; //将按钮置为不可点击
                    this.btn.value = this.nums + '秒后可重新获取';
                    this.clock = setInterval(this.doLoop, 1000); //一秒执行一次
                    axios.get("/user/getcode?mobilephone=" + this.regisform.mobilephone).then((res) => {
                        //发送验证码
                        if (res.data.flag) {
                            //发送成功
                            this.$message.success(res.data.message);
                        } else {
                            //发送失败
                            this.$message.error(res.data.message);
                        }
                    }).catch(() => {
                        this.$message.error("系统错误");
                    })
                } else {
                    this.$message.error("请填写合法的手机号");
                }
            },
            //注册
            regisUser() {
                //表单校验
                this.$refs['regisform'].validate((valid) => {
                    if (valid) {
                        axios.post("/user/regist", this.regisform).then((res) => {
                            if (res.data.flag
                            ) {
                                //注册成功
                                this.$message.success(res.data.message);
                            } else {
                                //注册失败
                                this.$message.error(res.data.message);
                            }

                        }).catch(() => {
                            this.$message.error("网络错误");
                        })
                    } else {
                        this.$message.error("信息校验失败，请重新填写");
                    }
                })
            },
            //获取图片验证码
            getcode() {
                var b = Math.random();
                document.getElementById("image1").src = "/user/images?d\x3d" + b
            }
        }
    });
</script>
</html>